<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>支付</title>
    <link href="/res/css/common/baseAzt.css" rel="stylesheet" type="text/css" />
    <link href="/res/css/common/backcommon.css" rel="stylesheet" type="text/css"/>
    <link href="/res/css/respective/order/back-order.css" rel="stylesheet">
    <link rel="stylesheet" href="/res/third/webupload/css/webuploader.css" type="text/css"/>
    <style type="text/css">
        #proveImgShow img {
            margin-right: 5px;
        }
        #contractFile img {
            margin-right: 5px;
        }
        /*#proveImgShow img:hover {
            opacity: 0.5;
            color: #fff;
            background: rgba(0,0,0,0.8);
        }*/
    </style>
</head>
<body>
	[#include "/front/common/front_head.html"]
	<div class="paypage">
    	<div class="praminfo"> 
        	<span><label>项目名称：</label><span title="${order.projectName!}">${CommonUtil.getSimpleStr(order.projectName!, 20)}</span></span>
            <span><label>询价名称：</label><a href="/xmh/${order.enquiryId!}" target="_blank" title="${order.enquiryName!}">${CommonUtil.getSimpleStr(order.enquiryName!, 20)}</a></span>
 
            <span><label>订单号：</label>${order.orderNumber!}</span>
            <span><label>应付总额：</label> <b>￥${order.totalPrice!?string('0.00')}</b></span>
        </div>
        <h5>买家付款账户信息</h5>
        [#if !buyerCompanyBank??]
        <div class="editcard">
        	<p>您尚未完善付款账户信息[#--，暂时无法发起支付--]</p>
            [#--<div class="tec"><a href="#" class="abtn">去设置</a></div>--]
        </div>
        [#else]
        <div class="sucesscard [#if buyerCompanyBank.bankType == 1]sucesscard2[/#if]" data-buyerCompanyBankId="${buyerCompanyBank.id!}">
            <ul class="fix">
                <li>
                    <em></em>
                    <div class="cd"><img src="/res/images/bank/bank1.png" alt="" />
                        <div class="des">
                            <p>${buyerCompanyBank.bankName!}</p>
                            <p class="p1">${buyerCompanyBank.bankCardNumber!}</p>
                        </div>
                    </div>
                    <div class="name">${buyerCompanyBank.creditName!}</div>
                    [#if buyerCompanyBank.ifDefault == 1]
                    <div class="act"><a href="javascript:void(0)">默认账户</a></div>
                    [/#if]
                </li>
            </ul>
        </div>
        [/#if]
        <h5>卖家收款账户信息</h5>
        [#if !sellerCompanyBank??]
        <div class="editcard">
        	<p>卖家尚未完善收款账户信息[#--，您暂时无法发起支付--]</p>
            [#--<div class="tec"><a href="#" class="abtn">提醒卖家设置</a></div>--]
        </div>
        [#else]
        <div class="sucesscard [#if sellerCompanyBank.bankType == 1]sucesscard2[/#if]" data-sellerCompanyBankId="${sellerCompanyBank.id!}">
            <ul class="fix">
                <li>
                    <em></em>
                    <div class="cd"><img src="/res/images/bank/bank2.png" alt="" />
                        <div class="des">
                            <p>${sellerCompanyBank.bankName!}</p>
                            <p class="p1">${sellerCompanyBank.bankCardNumber!}</p>
                        </div>
                    </div>
                    <div class="name">${sellerCompanyBank.creditName!}</div>
                [#if sellerCompanyBank.ifDefault == 1]
                    <div class="act"><a href="javascript:void(0)">默认账户</a></div>
                [/#if]
                </li>
            </ul>
        </div>
        [/#if]

        [#if successPayList?? && successPayList?size > 0]
        <h5>支付信息</h5>
        <div class="orderpayInfo">
            <div class="cont">
                [#list successPayList as pay]
                    [#if pay_index != 0]<div class="line">[/#if]
                    <table>
                        <tbody>
                        <tr>
                            <td width="20%"><b>第${pay_index + 1}批：</b>应付金额：¥${pay.totalPrice!?string('0.00')}</td>
                            <td width="15%">安装币抵扣：¥${pay.dePrice!0.00}  </td>
                            <td width="15%">实付金额：¥${(pay.totalPrice - pay.dePrice!0.00)?string('0.00')} </td>
                            <td width="25%">实付时间：${pay.payTime?datetime!}</td>
                            <td width="25%">支付方式：线下支付</td>
                        </tr>
                        [#if !pay_has_next]
                            <tr>
                                <td colspan="5"><p class="surplus"><b>剩余金额：</b><span class="orange">¥${payInfo.totalPrice!?string('0.00')}</span></p></td>
                            </tr>
                        [/#if]
                        </tbody>
                    </table>
                    [#if pay_index != 0]</div>[/#if]
                [/#list]
            </div>
        </div>
        [/#if]

        <h5>支付方式</h5>
        <div class="cardbox">
        	<ul class="fix">
            	<li style="display: none;"><label><input type="radio" name="payMode" value="2"/> <span><img src="/res/images/payType/card1.png" alt="" /></span></label></li>
                <li style="display: none;"><label><input type="radio" name="payMode" value="1"/> <span><img src="/res/images/payType/card2.png" alt="" /></span></label></li>
                <li><label><input type="radio" name="payMode" value="0" checked/> <span><img src="/res/images/payType/card3.png" alt="线下支付" /></span></label></li>
            </ul>
            <div class="cardcont">
            	<div class="icardcont">
                    <div class="pinput"><span class="orange">*</span> 本次支付金额： <input type="text" placeholder="请输入本次支付金额" /> 元</div>
                    <div class="coin">
                    <div class="fr">本次应付：<b>￥650.00</b></div>
                    <input type="checkbox" id="coinck" checked="checked" /> 使用安装币
                    <div class="hideinput">
                        <input type="text" class="hinput" /> <span class="orange">-￥0.6</span> （可用 <span class="orange">1285</span> 个安装币）
                    </div>
                    </div>
                    <div class="btn-right"><a href="#" class="abtn">去支付</a></div>
                </div>
                <div class="icardcont" style="display:none">
                   <div class="payoffline">
                   	  <p>如您已通过线下完成付款，请上传支付凭证和合同扫描件，以便卖家及时确认款项到账情况。</p>
                      <dl>
                      	<dd>
                        	<label><span class="orange">*</span> 本次支付金额</label>
                            <div class="ddinput">
                            	<input type="text" class="ainput" id="totalPrice"/> 元
                            </div>
                            <span class="error" id="priceError" style="display: none;"><i></i><span>请输入付款金额</span></span>
                        </dd>
                        <dd>
                            <label><span class="orange">*</span>上传支付凭证</label>
                            <div class="ddinput">
                                <input type="hidden" id="proveImg"/>
                                <a href="javascript:void(0)" class="shangchuan" onclick="choosePz()"></a>
                                <div id="pzfile" style="display: none;"></div>
                                <div id="proveImgShow"></div>
                            </div>
                        </dd>
                        <dd>
                        	<label>上传交易合同</label>
                            <div class="ddinput">
                                <input type="hidden" id="contractFile"/>
                            	[#--<p class="gray">上传交易合同扫描件，将获得积分奖励。</p>--]
                                <a href="javascript:void(0)" class="shangchuan" onclick="chooseHt()"></a>
                                <div id="htfile" style="display: none;"></div>
                                <div id="contractFileShow"></div>
                            </div>
                        </dd>
                        <dd>
                        	<label>&nbsp;</label>
                            <div class="ddinput">
                            	<a href="javascript:void(0)" class="abtn" onclick="pay()">立即提交</a>
                            </div>
                        </dd>
                      </dl>
                   </div>
                </div>
            </div>
        </div>
        [#--<div class="paytip">
        	<h6>温馨提醒</h6>
            <p>1、安装通和快钱合作,提供给您的是:企业网银在线支付方式,请确保您能使用IE浏览器进行支付;</p>
            <p>2、如果您使用工商银行网银支付，请确保本机已安装了工行的U盾或者证书;</p>
            <p>3、按快钱规定,商户每笔支付需收取10元手续费,目前由安装通平台承担;</p>
            <p>4、本平台支付由民兴信用担保提供资金保障，请放心支付;</p>
            <p>5、<input type="checkbox" id="hasRead"/>&nbsp;我已阅读并同意<a href="/order/xieyi" target="_blank">《安装通采供服务平台在线支付服务协议》。</a></p>
        </div>--]
    </div>
	<!-- 底部菜单-->
	[#include "/front/common/front_foot.html"]
    <!-- 提醒 -->
    <div class="tanbox tanTip" style="display: none;">
        <div class="tanbg"></div>
        <div class="box" style="width:400px;">
            <span class="closed"></span>
            <div class="cont">
                <div class="des">
                    <h4>提醒</h4>
                    <p>请在新打开的页面上完成设置，设置完成前不要关闭此窗口。</p>
                    <p class="orange">张三   025-6464656</p>
                </div>
                 <div class="btn"><a href="#" class="abtn">已完成财务设置</a> <a href="#" class="abtn">取消</a></div>
            </div>
        </div>
     </div>
<script type="text/javascript" src="/res/js/common/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/res/third/layer/layer.js"></script>
<script type="text/javascript" src="/res/third/webupload/js/webuploader.js"></script>
<script type="text/javascript">
	$('.tanbox .closed').click(function() {
		$(this).parents('.tanbox').hide();
	});

	$('.cardbox li').click(function() {
		$(this).siblings().removeClass().end().addClass('on');
		if($(this).index()==2){
			$('.cardbox .icardcont').hide().eq(1).show();
		}else{
			$('.cardbox .icardcont').hide().eq(0).show();
		}
	});

	$('#coinck').click(function(){
		if(this.checked){
			$('.coin .fr').show();
			$('.coin .hideinput').show();
		}else{
			$('.coin .fr').hide();
			$('.coin .hideinput').hide();
		}
	});

    //目前只能线下支付
    $('.cardbox input[type=radio]:eq(2)').click();


    var uploaderPz = WebUploader.create({
        auto : true,    //选择文件后自动上传
        swf: '/res/third/webupload/swf/Uploader.swf',   // swf文件路径
        server: '/res/third/ueditor/jsp/controller.jsp?action=uploadfile',  // 文件接收服务端。
        pick : {
            id : '#pzfile',
            multiple : false    //不支持多文件上传
        },
        resize: false,   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: false,
        accept: {       //只允许图片
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png' //不使用image/*，解决在chrome中的卡顿问题
        }
    });
    uploaderPz.on('uploadSuccess', function(file, response) {
        if(response && response.state == 'SUCCESS') {
            layer.msg('上传成功');
            var img = $('#proveImg').val();
            if(img == '') {
                $('#proveImg').val(response.url);
            } else {
                $('#proveImg').val(img + ',' + response.url);
            }
            $('#proveImgShow').append("<img src='" + response.url + "' width='90px' height='80px'/><a href='javascript:void(0)' onclick='deleteMe(this)'>删除</a>");
            $('#proveImg').parent().find('.shangchuan').hide();
            layer.photos({
                photos : '#proveImgShow'
            });
        } else {
            layer.msg('上传失败');
        }
    });
    uploaderPz.on('uploadStart', function(file) {
        layer.load(2, {shade: 0.1});
    });
    uploaderPz.on('uploadComplete', function(file) {
       layer.closeAll('loading');
    });
    uploaderPz.on('error', function(type) {
        console.log(type);
        if(type == 'Q_TYPE_DENIED') {
            layer.alert('支付凭证只能是图片');
        }
    });

    var uploaderHt = WebUploader.create({
        auto : true,    //选择文件后自动上传
        fileSingleSizeLimit : 50*1024*1024,
        swf: '/res/third/webupload/swf/Uploader.swf',   // swf文件路径
        server: '/res/third/ueditor/jsp/controller.jsp?action=uploadfile',  // 文件接收服务端。
        pick : {
            id : '#htfile',
            multiple : false    //不支持多文件上传
        },
        resize: false,   // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        compress: false
    });
    uploaderHt.on('uploadSuccess', function(file, response) {
        if(response && response.state == 'SUCCESS') {
            layer.msg('上传成功');
            var img = $('#contractFile').val();
            if(img == '') {
                $('#contractFile').val(response.url);
            } else {
                $('#contractFile').val(img + ',' + response.url);
            }
            $('#contractFileShow').append("<a href='" + response.url + "' style='color: #00a8e6; line-height: 32px;'>" + file.name + "</a>&nbsp;&nbsp;&nbsp;<a href='javascript:void(0)' onclick='deleteMe(this)'>删除</a>");
            $('#contractFileShow').parent().find('.shangchuan').hide();
            layer.photos({
                photos : '#contractFileShow'
            });
        } else {
            layer.msg('上传失败');
        }
    });
    uploaderHt.on('uploadStart', function(file) {
        layer.load(2, {shade: 0.1});
    });
    uploaderHt.on('uploadComplete', function(file) {
        layer.closeAll('loading');
    });
    uploaderHt.on('error', function(type) {
       if(type == 'F_EXCEED_SIZE') {
           layer.alert('文件不能超过50M');
       }
    });

    function choosePz() {
        if($('#proveImgShow img').length == 0) {
            $('#pzfile input[type=file]').click();
        } else {
            layer.msg('只能上传一张凭证');
        }
    }

    function chooseHt() {
        if($('#contractFile img').length == 0) {
            $('#htfile input[type=file]').click();
        } else {
            layer.msg('只能上传一个合同');
        }
    }

    function deleteMe(obj) {
        $(obj).parent().parent().find('input[type=hidden]').val('');
        $(obj).parent().parent().find('.shangchuan').show();
        $(obj).parent().html('');
    }

    //支付
    function pay() {
        var maxPayPrice = '${order.totalPrice!}';   //应付的最大金额

        var orderId = '${order.id!}';
        var payId = '${payInfo.id!}';
        var buyerCompanyBankId = $('div[data-buyerCompanyBankId]').attr('data-buyerCompanyBankId');
        var sellerCompanyBankId = $('div[data-sellerCompanyBankId]').attr('data-sellerCompanyBankId');
        var payMode = $('input[name=payMode]:checked').val();
        var payType = '';
        var totalPrice = $('#totalPrice').val();
        var decoins = 0;
        var proveImg = $('#proveImg').val();
        var contractFile = $('#contractFile').val();
        //var hasRead = $('#hasRead').is(":checked");
        var hasRead = true;

        if(!Number(totalPrice)) {
            layer.alert("请输入正确的支付金额");
            return;
        }
        if(Number(totalPrice) > maxPayPrice) {
            layer.alert("本次支付金额不能超过" + maxPayPrice);
            return;
        }
        if(proveImg == '') {
            layer.alert("请上传支付凭证");
            return;
        }

        $.ajax({
            url : '/order/pay',
            type : 'post',
            dataType : 'json',
            data : {orderId : orderId, payId : payId, buyerCompanyBankId : buyerCompanyBankId, sellerCompanyBankId : sellerCompanyBankId,
                payMode : payMode, payType : payType, totalPrice : totalPrice, decoins : decoins, proveImg : proveImg, contractFile : contractFile, hasRead : hasRead},
            beforeSend : function() {
                layer.load(2, {shade: 0.1});
            },
            success : function(data) {
                if(data.success) {
                    layer.alert('提交成功', {closeBtn: 0}, function() {
                        location.replace('/order/payList?payResult=1');
                    });
                } else {
                    layer.alert(data.msg);
                }
            },
            complete : function() {
                layer.closeAll('loading');
            }
        })
    }
</script>
</body>
</html>
